<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./v4.6.5-dist/ol.css">
    <title>Document</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        #wmts {
            width: 80%;
            height: 80%;
            margin: 0 auto;
        }
    </style>
    <script src="./v4.6.5-dist/ol.js"></script>
</head>
<body>
<div id="wmts">

</div>
<script>
    //    var matrixIds = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
    //    var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 8.58306884765625e-005, 4.291534423828125e-005, 2.1457672119140625e-005, 1.0728836059570313e-005, 5.36441802978515625e-006, 2.682209014892578e-006, 1.341104507446289e-006];
    //

    var projection = ol.proj.get('EPSG:4326');
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = new Array(14);
    var matrixIds = new Array(14);
    for (var z = 0; z < 14; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }

    var wmts = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM(),
                opacity: 0.7
            }),
            //http://t0.tianditu.com/img_c/wmts?layer=img&matrixSet=c&format=tiles&style=default
            //http://t0.tianditu.com/img_c/wmts?styles=img&matrixSet=c&format=tiles&style=default
            new ol.layer.Tile({
                source: new ol.source.WMTS({
//                    url: 'https://services.arcgisonline.com/arcgis/rest/' +
//                    'services/Demographics/USA_Population_Density/MapServer/WMTS/',
                    url:"http://t0.tianditu.com/img_c/wmts",
                    layer: 'img',
                    matrixSet: 'c',
                    format: 'tiles',
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    }),
                    style: 'default',
                })
            })
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: "wmts"
    })
</script>
</body>
</html>